<template functional>
  <div
    class="scorePopup"
    @click="listeners.close"
  >
    <div class="content">
      <p class="score">
        {{props.score}}
      </p>

      <span class="close"/>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'score-popup',
    props: {
      score: {
        'default': 5
      }
    }
  }
</script>

<style lang="less" scoped>
  @keyframes rotate {
    from{
      transform: rotateZ(0deg);
    }
    to{
      transform: rotateZ(360deg);
    }
  }

  .scorePopup {
    position: fixed;
    z-index: 3;

    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    background-color: rgba(0, 0, 0, .7);

    &:before,
    &:after{
      content: '';
      display: inline-block;

      margin: -200px 0 0 -200px;
      width: 400px;
      height: 400px;

      position: absolute;
      left: 50%;
      top: 50%;

      background: url("./light.png") center / contain no-repeat;

      animation: rotate linear 15s infinite;
    }

    &:before{
      animation-delay: -.5s;
      animation-duration: 10s;
      animation-direction: reverse;
    }
  }

  .content {
    z-index: 1;

    margin-left: -107px;
    margin-top: -150px;
    width: 214px;
    height: 223px;

    position: absolute;
    top: 50%;
    left: 50%;

    text-align: center;
    background: url("./score-popup.png") center / contain no-repeat;
  }

  .score {
    margin-top: 65px;
    padding-right: 15px;

    left: 50%;

    font-size: 46px;
    color: #FFB400;
    line-height: 1;
    font-weight: 700;
    text-align: center;

    transform: rotate(-10deg);
  }

  .close {
    position: absolute;

    border: 1px solid #BFBFBF;
    border-radius: 14px;
    width: 28px;
    height: 28px;

    bottom: -40px;
    left: 42%;
    &:before, &:after{
      content: '';
      position: absolute;
      display: inline-block;

      width: 20px;
      height: 1px;

      left: 4px;
      top: 13px;

      background-color: #BFBFBF;
    }
    &:after {
      transform: rotate(45deg);
    }
    &:before {
      transform: rotate(-45deg);
    }
  }
</style>
